<template>
	<block>
		<hxt-layout id="hxt-layout" title="密码保险箱" svc="minikeeper" initTitle="密码保险箱加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #F5F5F5;" v-if="!!currentUser">
				<van-search v-model="mkpName" show-action label="密码串" placeholder="请输入搜索关键词" @search="loadList"
					use-action-slot>
					<template #action>
						<text class="fa fa-plus text-blue padding-lr-10" @click="openEdit(0,null)"></text>
					</template>
				</van-search>
				<view class="hxt-flex-fill" style="height: 1px;">
					<scroll-view scroll-y style="height: 100%;" :enhanced="true" :bounces="false"
						scroll-with-animation="true" enable-back-to-top="true">
						<van-cell v-for="(item,index) in list" :key="index" v-if="search(item)"
							@click="openEdit(3,item)" :title="item.mkpName" is-link clickable></van-cell>
					</scroll-view>
				</view>
			</view>
			<page-container v-if="show" :show="show" position="bottom" @clickoverlay="show=false" @afterleave="show=false"
				round>
				<view class="cu-bar bg-white solid-bottom" style="background-color:#eee;">
					<view class="action">
						<text class="cuIcon-title text-orange "></text>密码串
					</view>
					<view class="action">
						<button class="cu-btn line-cyan round shadow sm" style="width:auto;"
							@click="closeAdd">关闭</button>
					</view>
				</view>
				<view class="padding-tb-sm bg-light">
					<van-cell-group class="shadow-1" inset>
						<van-field label="APP名称" v-model="form.mkpName" placeholder="APP名称" :readonly="form.optType==3"
							clearable></van-field>
						<van-field label="账号" v-model="form.mkpAccount" placeholder="账号" :readonly="form.optType==3"
							clearable></van-field>
						<van-field ref="mkpPwd" label="密码" placeholder="密码" v-model="form.mkpPwd"
							:readonly="form.optType==3" @click-input="pwdClick(form.mkpPwd)" clearable>
							<template #button v-if="form.optType==1">
								<van-checkbox :value="form.changePwd" @change="onChange">修改密码</van-checkbox>
							</template>
						</van-field>
						<van-field label="附加信息" :placeholder="form.optType==3?'':'附加信息'" rows="1" autosize
							type="textarea" v-model="form.mkpMark" :readonly="form.optType==3" clearable></van-field>
						<van-cell title="密码更新于" title-style="color: #646566;"
							v-if="!!form.mkpMakeTime&&form.optType==3">
							{{toDateFormat(form.mkpMakeTime)}}
						</van-cell>
					</van-cell-group>
				</view>
				<view class="hxt-flex" style="padding:10rpx 30rpx;">
					<template v-if="form.optType==3">						
						<div class="hxt-flex" style="justify-content:space-between;width:100%;">
							<van-button round type="info" size="small" @click="openEdit(1)">编
								辑</van-button>
							<van-button round type="danger" size="small" @click="del">删
								除</van-button>
						</div>
					</template>
					<van-button style="width:100%;" v-else round block type="info" @click="submit" size="small">保
						存</van-button>
				</view>
			</page-container>
			<van-popup :show="showDecryption" position="top" @clickoverlay="showDecryption=false"
				@close="showDecryption=false" round>
				<view class="bg-light padding-tb-sm">
					<van-cell-group custom-class="shadow-1 bg-white" inset>
						<van-field v-model="decryption.text" placeholder="请输入加密的字符串" rows="1" autosize type="textarea"
							readonly></van-field>
					</van-cell-group>
					<div class="padding-sm">
						<van-button round block type="info" size="small" @click="startDecryption">解 密</van-button>
					</div>
					<van-cell-group custom-class="shadow-1 bg-white" inset>
						<van-field v-model="decryption.value" placeholder="解密后的字符串"
							@click-input="copyToClipboard(decryption.value)" readonly></van-field>
					</van-cell-group>
				</view>
			</van-popup>
		</hxt-layout>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			const app = getApp();
			return {
				currentUser: app.globalData.currentUser,
				mkpName: '',
				list: [],
				form: {
					optType: 0,
					mkpId: 0,
					mkpName: '',
					mkpAccount: '',
					mkpPwd: '',
					mkpMakeTime: '',
					mkpMark: '',
					changePwd: false,
				},
				show: false,
				showDecryption: false,
				decryption: {
					text: '', //加密的字符串
					value: '', //解密后的字符串
				}
			}
		},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				if (!e.user) e.callBack('个人资料加载失败');
				_this.currentUser = e.user;
				hxt.soterAuthentication(function(data) {
					if (data.code == 1) return _this.loadList();
					if (data.code != 0) return e.callBack(data.errmsg);
					if (!_this.currentUser.fId) { //添加指纹
						hxt.post({
							url: hxt.domain + "wx/editFingerprint",
							data: data.resultJSON,
							ok: function(res) {
								hxt.error('保存失败：' + res.data.errmsg);
								_this.loadList();
							},
							fail: function(res) {
								hxt.error('保存失败：' + res.errMsg);
							}
						});
					} else { //验证指纹
						if (data.resultJSON.fid != _this.currentUser.fId) return e.callBack('指纹解锁失败：指纹不匹配');
						_this.loadList();
					};
				});

			},
			loadList: function() {
				var _this = this;
				hxt.post({
					url: hxt.domain + "pc/minikeeperList",
					data: {},
					ok: function(res) {
						if (res.data.code != 0) return hxt.error('加载失败：' + res.data.errmsg);
						_this.list = res.data.data;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg
						});
					}
				});
			},
			search: function(item) {
				var txt = ('' + item.mkpName).toUpperCase(),
					str = this.mkpName.toUpperCase();
				return txt.indexOf(str) > -1 || !str;
			},
			openEdit: function(flag, g) { //1：新增；3：查看
				var _this = this,
					obj = {
						optType: flag,
						mkpId: 0,
						mkpName: '',
						mkpAccount: '',
						mkpPwd: '',
						mkpMark: '',
						changePwd: 0,
					};
				if (flag == 0) {
					_this.form = obj;
					_this.show = true;
				};

				if (flag == 3) {
					_this.form = g;
					_this.form.optType = flag;
					_this.show = true;
				};
				_this.$set(_this.form,'optType',flag);
				_this.$forceUpdate();
				console.log(_this.form, _this.show);
			},
			pwdClick: function(mkpPwd) {
				var _this = this;
				if(_this.form.optType!=3)return;
				_this.decryption.value = "";
				_this.decryption.text = mkpPwd;
				_this.showDecryption = true;
			},
			onChange: function(e) {
				var _this=this;
				_this.form.changePwd=e.detail;
				_this.$forceUpdate();
			},
			copyToClipboard: function(msg) {
				var _this = this;
				wx.setClipboardData({
					data: msg,
					success(res) {
						hxt.success('已复制到剪贴板');
					}
				})
			},
			startDecryption: function() {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/YYSxAESDecrypt',
					data: {
						TEXT: _this.decryption.text
					},
					ok: function(res) {
						if (res.data.code != 0) return hxt.error('解密失败：' + res.data.errmsg);
						_this.decryption.value = res.data.data;
					},
					fail: function(res) {
						hxt.error('解密失败：' + res.errMsg);
					}
				});
				//console.log(hxt.aesDecrypt(hxt.fromBase64(_this.decryption.text), "kVfRiM3ATsuKxUsE"),"");
				//_this.decryption.value = hxt.aesDecrypt(hxt.fromBase64(_this.decryption.text),"kVfRiM3ATsuKxUsE");
			},
			del: function() {
				var _this = this;
				hxt.confirm("确定删除此密码串？", " ", function() {
					hxt.post({
						url: hxt.domain + 'pc/minikeeperSave',
						data: {
							optType: 2,
							mkpId: _this.form.mkpId
						},
						ok: function(res) {
							if (res.data.code != 0) return hxt.error('删除失败：' + res.data.errmsg);
							var index = _this.list.findIndex(function(item) {
								return item.mkpId == _this.form.mkpId
							});
							_this.list.splice(index, 1);
							_this.show = false;
						},
						fail: function(res) {
							hxt.error('删除失败：' + res.errMsg);
						}
					});
				});
			},
			submit: function() {
				var _this = this,
					form = JSON.parse(JSON.stringify(_this.form));
				if (!form.mkpName) return hxt.error('APP名称不能为空');
				if (!form.mkpAccount) return hxt.error('账号不能为空');
				if (!form.mkpPwd) return hxt.error('密码不能为空');

				hxt.confirm("确定保存此密码串？"," ", function() {
					hxt.post({
						url: hxt.domain + 'pc/minikeeperSave',
						data: form,
						ok: function(res) {
							if (res.data.code != 0) return hxt.error('保存失败：' + res.data.errmsg);
							_this.loadList();
							_this.show = false;
						},
						fail: function(res) {
							hxt.error('保存失败：' + res.errMsg);
						}
					});
				});
			},
			toDateFormat: function(date) {
				return hxt.dateFormat1(date);
			},
			closeAdd: function(e) {
				var _this = this;
				_this.show = false;
				_this.showDecryption = false;
			},
		}
	}
</script>

<style>

</style>